import QRcode from "qrcode.react";
import { Modal, Image } from "antd";
import { ShareAltOutlined } from "@ant-design/icons"
import { useEffect, useState } from "react";
const Share = ({ item }) => {
  const [data, setData] = useState({});
  const [isModalVisible, setIsModalVisible] = useState(false)
  //展示
  const showModal = () => {
    setIsModalVisible(true)
  }
  //确认
  const handleOk = () => {
    setIsModalVisible(false)
  };
  //取消
  const handleCancel = () => {
    setIsModalVisible(false)
  }
  useEffect(() => {
    setData(item)
  }, [])
  return (
    <div style={{ display: "inline-block" }} className='shareWarpper'>
      <span onClick={showModal}><ShareAltOutlined />分享</span>
      <Modal title={"分享海报"}
        visible={isModalVisible}
        onOk={handleOk}
        oncancel={handleCancel}
        okText="取消"
        cancelText="下载"
      >
        <Image
          width={450}
          height={260}
          src={data.cover ? data.cover : "error"}
          fallback=""
        ></Image>
        <h4 style={{ margin: "10px 0", fontWeight: 800 }}>{data.title}</h4>
        <div style={{ display: 'flex' }}>
          <QRcode value="http://creation.shbwyz.com" style={{
            width: "90px",
            height: "100px"
          }}></QRcode>
          <div style={{ marginLeft: "20px" }}>
            <p>识别图中二维码查看文章</p>
            <p>创作平台</p>
          </div>
        </div>
      </Modal>
    </div>
  )
}
export default Share
